<template>
  <div>
    <div>
      <el-input v-model="keywords"></el-input>
      <el-button @click="addCate(0, '无')">添加分类</el-button>
    </div>
    <br>
    <!-- 渲染分类树 -->
    <el-table
      border
      :data="catData"
      row-key="id"
      :tree-props="{
        children: 'children',
        hasChildren: 'hasChildren'
      }"
    >
      <el-table-column
        label="名称"
        prop="label"
      >
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <!-- 当没有父分类时（一级）显示新增按钮 -->
          <template v-if="scope.row.parent_id == 0">
            <el-link @click="addCate(scope.row.id, scope.row.label)">新增</el-link> -
          </template>
          <el-link @click="editCate(scope.row)">修改</el-link> -
          <el-link>删除</el-link>
        </template>
      </el-table-column>
    </el-table>

    <!-- 弹出框 -->
    <el-dialog title="添加/修改分类" :visible.sync="showDialog">
      <!-- 表单 -->
      <el-form ref="addForm" label-width="100px">
        <el-form-item label="所属分类">
          {{comParentName}}
        </el-form-item>
        <el-form-item label="分类名称">
          <el-input v-model="addForm.title" placeholder="请输入名称，最多可添加20个字"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="addForm.sort"></el-input>
        </el-form-item>
      </el-form>

      <!-- 底部 -->
      <div slot="footer">
        <el-button @click="showDialog=false">取消</el-button>
        <el-button @click="add">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      addForm: {
        id: 0,
        parent_id: 0,
        title: '',
        sort: 1
      },
      parentName: '无',
      showDialog: false,
      keywords: '',
      catData: []
    }
  },
  created() {
    axios.get('/course/classify?keywords='+this.keywords).then(res=>{
      if(res) {
        this.catData = res.data
      }
    })
  },
  computed: {
    // 计算表单中所属分类的内容
    comParentName() {
      if(this.addForm.id == 0) {
        return this.parentName
      } else {
        // 如果是修改
        if(this.addForm.parent_id == 0) {
          return '无'
        } else {
          // 根据 parent_id 查询上级分类的名称
          // 循环数组中的每条记录 v：每条记录
          let parent = this.catData.find(v=>{
            // 找id等于parent_id的记录
            return v.id == this.addForm.parent_id
          })
          return parent.label
        }
      }
    }
  },
  methods: {
    // 点击添加分类、新增的按钮
    addCate(id, title) {
      // 设置记录的ID为0（代表是添加）
      this.addForm.id = 0
      // 保存到 form 中
      this.addForm.parent_id = id
      this.parentName = title
      // 显示弹出框
      this.showDialog = true
    },
    // 修改分类
    editCate(row) {
      // 设置记录的ID（代表是修改）
      this.addForm.id = row.id

      // 把表单中的值填上
      this.addForm.title = row.label
      this.addForm.sort = row.sort
      this.addForm.parent_id = row.parent_id

      this.parentName = '这里应该显示上级分类的名字'

      // 显示弹出框
      this.showDialog = true
    },
    add() {

      // 请求的方法
      let method = 'post'
      let url = '/course/classify'
      // 修改
      if(this.addForm.id > 0) {
        method = 'put'
        url += '/' + this.addForm.id
      }

      axios[method](url, this.addForm).then(res=>{
        if(res) {
          // 如果成功就重新获取最新的数据并渲染
          axios.get('/course/classify').then(res=>{
            if(res) {
              this.catData = res.data
              this.$message.success('操作成功~')
              // 清空表单
              // this.$refs.addForm.resetFields()

              this.addForm.id = 0
              this.addForm.parent_id = 0
              this.addForm.title = ''
              this.addForm.sort = 1
            }
          })
        }
      }).finally(()=>{
        // 关闭弹出框
        this.showDialog = false
      })



      // if(this.addForm.id==0) {
      //   axios.post('/course/classify', this.addForm).then(res=>{
      //     if(res) {
      //       // 如果成功就重新获取最新的数据并渲染
      //       axios.get('/course/classify').then(res=>{
      //         if(res) {
      //           this.catData = res.data
      //           this.$message.success('操作成功~')
      //           // 清空表单
      //           // this.$refs.addForm.resetFields()

      //           this.addForm.parent_id = 0
      //           this.addForm.title = ''
      //           this.addForm.sort = 1
      //         }
      //       })
      //     }
      //   }).finally(()=>{
      //     // 关闭弹出框
      //     this.showDialog = false
      //   })
      // } else {
      //   axios.put('/course/classify/' + this.addForm.id, this.addForm).then(res=>{
      //     if(res) {
      //       // 如果成功就重新获取最新的数据并渲染
      //       axios.get('/course/classify').then(res=>{
      //         if(res) {
      //           this.catData = res.data
      //           this.$message.success('操作成功~')
      //           // 清空表单
      //           // this.$refs.addForm.resetFields()

      //           this.addForm.id = 0
      //           this.addForm.parent_id = 0
      //           this.addForm.title = ''
      //           this.addForm.sort = 1
      //         }
      //       })
      //     }
      //   }).finally(()=>{
      //     // 关闭弹出框
      //     this.showDialog = false
      //   })
      // }


    }
  }
}
</script>
